網址正式名稱為URL(Uniform Resource Locator)統一資源定位符, 完整包含protocol://username:password@hostname:port/path?query#fragment,
一般username:password@可省略, 一般所稱的Web即全球資訊網(World Wide Web)也簡稱www, 即是使用http協議, http server端預設是80 port, hostname可以是網域名也可以是IP位置, 網域名經由DNS查出IP, 如果hostname是IP位置在瀏覽器輸出時就可以經過TCP三次交握與server端建立連線, 連線建立後利用http協議傳送資料, 此時瀏覽器會發出get的request, 然後瀏覽器會將結果response給瀏覽器, 最後斷開連線, 所以每一次瀏覽器發送網址的請求都會造成整個畫面重新渲染, 這樣使用者體驗不佳, 也會造成連線資源的浪費
微軟首先在IE 4.0允許客戶端使用指令碼傳送HTTP請求, 當2005年google已經在眾多產品使用Ajax技術, 這時客戶端可以在不刷新整個頁面下, 發出HTTP request來得新資料來更新局部畫面
// server.js
let http = require("http");
// url模組可以用來解析URL
let url = require("url");
// file sysytem模組 用來處理讀寫
let fs = require("fs");
// 建立http server
let server = http.createServer();
// 此http server 監聽9000 port
server.listen(9000, () => {
console.log("http server 於9000 port啟動成功");
});
// 監聽request事件,callback function的兩個參數, req是接收到的request, res是回應的response
server.on("request", (req, res) => {
// 將request的url解析
let urls = url.parse(req.url, true);
// 如果請求的pathname是 /gets 回應給Hello
if (urls.pathname == "/gets") {
res.end("Hello");
// 如果請求是其他就將其檔案讀取, 如果沒有出錯就將讀取結果返回
} else {
fs.readFile(`.${urls.pathname}`, (err, data_str) => {
if (!err) {
res.end(data_str);
} else {
console.log(err);
res.end("");
}
});
}
});
使用瀏覽器提供的Web API建立XMLHttpRequest物件
<!-- ajaxget.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="button" value="發送" id="btn" />
<script>
let btn = document.getElementById("btn");
btn.addEventListener("click", () => {
let xhr = new XMLHttpRequest();
xhr.open("get", "http://127.0.0.1:9000/gets");
xhr.setRequestHeader("content-type", "mm/form-data");
xhr.send();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
alert(xhr.responseText);
alert(xhr.status);
}
};
});
</script>
</body>
</html>